import styled from "styled-components"
import { useAll } from "../../useData/useAll"
import Bubble from "../bubble"
import XChartBox from "../chart-box"


const All = () => {
  const [chart] = useAll()

  return (
    <XChartBox title="整体分析">
      <div ref={chart} style={{ height: 256, width: 390 }} />
    </XChartBox>
  )
}

const Part02 = () => {
  return <Part02Container>
    <All />
    <Bubble />
  </Part02Container>
}

export default Part02

const Part02Container = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`
